<template>
  <div class="yxp-composition">
    <div class="yxp-composition-box">
      <div class="xiezuo-title">轻松写作</div>
      <div style="display: flex;justify-content: center;">
        <div class="boxs" @click.stop="handleChange">
          <img alt="" src="@/assets/home/qiehuan.png" style="width:30px;height:30px" @click="handleChange"/>
          <span style="cursor: pointer;font-size: 20px;">{{ title || "请先选择课程" }}</span>
        </div>
      </div>
      <div class="xiezuo-main">
        <div class="imgbox">
          <img src="@/assets/xiezuo/xiezuo_home_bg.png" style="width: 80%"/>
          <div class="contents">
            <div class="ContentS_one">
              <div class="b1">
                <div class="s6">
                  上次学习
                </div>
                <div>
                  {{ indexInfo.courseCheck ? indexInfo.courseCheck : '暂无' }}
                </div>
              </div>
              <div class="b1">
                <div class="s6">
                  累计已学
                </div>
                <div>
                  <em>{{ indexInfo.courseNum }}</em>篇
                </div>
              </div>
            </div>
            <div class="b1s" @click="handleModel">
              开始学习
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="isShow" class="mark"></div>
    <div v-if="isShow" class="app-writing-pop">
      <img class="close" src="@/assets/word/close-icon.png" @click="isShow = false" alt=""/>
      <div class="yxp-writing-main" >
        <div v-if="course.length > 0" class="select-course">
          <p v-for="(item,i) in course" :Key="item.id" :class="{active: curIndex === i}" class="select-course-item"
             @click="handleCourse(item,i)">{{ item.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {checkCourse, writingCourse, writingInfo} from "@/api/reverse";

export default {
  name: 'composition',
  data() {
    return {
      brand_info: null,
      curIndex: -1, //课程默认显示
      title: '',
      id: -1, // 课程id
      isShow: false,
      course_type: 0,
      course: [], // 课程列表
      lastInfo: {}, // 上次课程信息
      indexInfo: {},
      brank_skin: null,
      air_xz_page_style: '',
    }
  },
  computed: {},
  components: {},
  created() {
    this.ListData()
  },
  methods: {
    async ListData() {
      let ids = 0;
      if (this.$route.query.userid) {
        ids = this.$route.query.userid
      } else {
        ids = JSON.parse(localStorage.getItem("T_USER_INFO")).id
      }
      await writingCourse({userId: ids}).then((res) => {
        this.course = res.data
      })
      await writingInfo({userId: ids}).then((res) => {
        this.title = res.data.name
        this.indexInfo = res.data
      })
    },
    // 选择课程
    async handleCourse(item, i) {
      this.curIndex = i
      this.title = item.name
      this.id = item.id
      let ids = 0;
      if (this.$route.query.userid) {
        ids = this.$route.query.userid
      } else {
        ids = JSON.parse(localStorage.getItem("T_USER_INFO")).id
      }
      this.isShow = false
      let data = {
        courseId: this.id,
        userId: ids
      }
      await checkCourse(data).then((res) => {
        this.$message.success(res.message)
        this.ListData()
      })
    },
    handleChange() {
      this.isShow = true
      console.log(123)
    },
    handleModel() {
      if (this.title === '') {
        this.$message.error('请选择课程')
        return
      }
      let Uid = JSON.parse(localStorage.getItem("T_USER_INFO"));

      if (this.$route.query.userId) {
        this.$router.push({
          path: "/composition/courseList",
          query: {
            userid: this.$route.query.userid,
            course_id: this.indexInfo.id
          }
        })
      } else {
        this.$router.push({
          path: "/composition/courseList",
          query: {
            userid: Uid.id,
            course_id: this.indexInfo.id
          }
        })
      }
      // this.$router.push({
      //   path: "/composition/courseList",
      //   query: {
      //     id:this.$route.query.userId
      //   }
      // })
    },
    async getLastCourse() {
      this.$loading.show()
      let data = await lastCourse()
      if (data.code === 1) {
        let result = data.data
        if (result.id === 0 || result.id === '') {
          this.getCourseList()
        } else {
          this.id = result.id
          this.title = result.title
          this.indexInfo = data.data
          this.course_type = data.data.type
          this.getIndexInfo(result.id)
        }
      } else if (data.code === 10001 || data.code === '10001') {
        this.$loading.hide()
        this.$message.error('token失效，请重新登录')
      } else {
        this.$loading.hide()
        this.$message.error(data.info)
      }
    },
    async getCourseList() {
      let params = {
        question_type: 4
      }
      let data = await courseList(params)
      if (data.code === 1) {
        this.$loading.hide()
        this.course = data.data
        if (this.course.length === 0) {
          this.$message.error('请购买课程')

        } else {
          this.isShow = true
        }
      } else if (data.code === 10001 || data.code === '10001') {
        this.$loading.hide()
        this.$message.error('token失效，请重新登录')
      } else {
        this.$loading.hide()
        this.$message.error(data.info)
      }
    },
    async getIndexInfo(id) {
      let params = {
        id: id
      }
      let data = await indexInfo(params)
      if (data.code === 1) {
        this.id = data.data.id
        this.title = data.data.title
        this.$loading.hide()
        this.indexInfo = data.data
      } else if (data.code === 10001 || data.code === '10001') {
        this.$loading.hide()
        this.$message.error('token失效，请重新登录')
      } else {
        this.$loading.hide()
        this.$message.error(data.info)
      }
    },
    handleBack() {
      this.$router.push({
        path: '/work/studytype'
      })
    }
  }
}
</script>
<style scoped>
.yxp-composition {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  /* //background-image: url('@/assets/super-read/index-bg.png'); */
  box-sizing: border-box;
  background-size: cover;
  min-height: 600px;
}

.yxp-composition-box {
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  background: #fff;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 30px;
}

.yxp-composition-box .back-prev {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 30px;
  height: 27px;
  background-image: url("@/assets/home/btn_back.png");
  background-size: 100%;
  cursor: pointer;
}
.yxp-writing-main{
  height: 100%;
  overflow-y: hidden; /* 隐藏滚动条 */
  display: flex;
  align-items: center;
  /* justify-content: center; */
}
.yxp-writing-main::-webkit-scrollbar {
  width: 0; /* Safari and Chrome */
  display: none; /* Safari and Chrome */
}
.select-course{
  width: 100%;
  max-height: 80%; /* 调整高度以适应父容器 */
  overflow-y: auto; /* 启用滚动 */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.select-course::-webkit-scrollbar {
  width: 0; /* Safari and Chrome */
  display: none; /* Safari and Chrome */
}
.xiezuo-title {
  position: relative;
  text-align: center;
  font-size: 50px;
  font-weight: bold;
  margin: 0 1rem;
  color: #000;
}

.boxs {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ccc;
  width: 250px;
  border-radius: 10px;
}

.xiezuo-desc {
  font-size: 20px;
  font-weight: bold;
  color: #1fad9b;
}

.mark {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 150;
}

.xiezuo-select-course {
  display: block;
  font-size: 16px;
  line-height: 16px;
  position: relative;
  margin-top: 32px;
  color: #666666;
  text-align: center;
}

.xiezuo-select-course .arrow-right {
  position: absolute;
  height: 12px;
  width: 6px;
  right: -10px;
}

.xiezuo-select-course-text {
  height: 40px;
  font-size: 20px;
  color: #666666;
  line-height: 42px;
}

.xiezuo-select-course-default-text {
  margin-top: 5px;
  color: #666666;
  font-size: 15px;
  display: inline-block;
  position: relative;
}

.app-writing-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  background: #fff;
  border-radius: 10px;
  z-index: 1000;
  height: 300px;
}

.app-writing-pop .close {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.app-writing-pop .select-course {
  text-align: center;
  /* margin-bottom: 30px; */
}

.app-writing-pop .select-course::-webkit-scrollbar {
  width: 0 !important;
}

.app-writing-pop .select-course .active {
  color: #27BFA3;
}

.app-writing-pop .select-course-item {
  font-size: 24px;
    width: 100%;
    font-weight: 400;
    color: #333333;
    padding: 10px;
}

.imgbox {
  position: relative;
  text-align: center;
  width: 100%;
}

.contents {
  width: 30%;
  height: 195px;
  position: absolute;
  bottom: 33px;
  right: 161px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ContentS_one {
  display: flex;
  justify-content: space-around;
  height: 105px;
  font-weight: 900;
}

.b1 {
  display: flex;
  color: #262626;
  font-size: 20px;
  flex-direction: column;
  justify-content: space-around;
}

.s6 {
  color: #606060;
  font-size: 16px;
}

.b1s {
  height: 50px;
  line-height: 50px;
  font-size: 32px;
}

.xiezuo-main {
  display: flex;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-around;
  padding-top: 100px;
}

.xiezuo-main .xiezuo-left-col {
  width: 200px;
  height: 356px;
  background: #FFFFFF;
  box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
}

.xiezuo-main .xiezuo-main-col .xiezuo-main-col-box {
  cursor: pointer;
  margin-top: 7px;
}

.xiezuo-main .xiezuo-main-col .xiezuo-main-col-box img {
  height: 352px;
  width: 318px;
}

.xiezuo-main .xiezuo-right-col {
  opacity: 0;
  pointer-events: none;
  width: 200px;
  height: 356px;
  background: #FFFFFF;
  box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
}

.xiezuo-status {
  display: flex;
  height: 100%;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
  align-items: center;
  padding: 15px 5px;
}

.xiezuo-status .xiezuo-status-item {
  flex: 1;
  display: flex;
  align-content: space-around;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.total-study-text {
  font-size: 15px;
  color: #666666;
}

.total-study-num {
  font-size: 20px;
  font-weight: 500;
  color: #27C2A5;
}

.last-unit {
  margin-right: 3px;
}

.yxp-composition.yxp-composition-skin-1 {
  background: url(@/assets/read_v2/fjyd_bg.png) center / 100% 100% no-repeat;
}

.yxp-composition.yxp-composition-skin-1 .xiezuo-main .xiezuo-left-col {
  height: 450px;
}

.yxp-composition.yxp-composition-skin-1 .xiezuo-main-col-box {
  padding-top: 0;
  height: 450px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-end;
  align-items: center;
}

.yxp-composition.yxp-composition-skin-1 .xiezuo-main-col-box img {
  width: 279px;
  height: 384px;
}

.yxp-composition.yxp-composition-skin-1 .xiezuo-title {
  color: #000;
  font-size: 35px;
}

.yxp-composition.yxp-composition-skin-1 .xiezuo-left-col {
  background: #FFFFFF;
  box-shadow: none;
  border-radius: 10px;
}

.yxp-composition.yxp-composition-skin-1 .xiezuo-right-col {
  display: block;
  box-shadow: none;
  opacity: 1;
}

.yxp-composition.yxp-composition-skin-1 .back-prev {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 20px;
  background-image: url("@/assets/read_v2/fjyd_icon_fanhui.png");
  background-size: 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 100;
}

.yxp-composition.yxp-composition-skin-1 .meta-cards {
  width: 160px;
  background: #fff;
  margin: 0 auto;
}

.yxp-composition.yxp-composition-skin-1 .meta-cards .card-item {
  margin: 0 auto;
  margin-top: 100px;
}

.yxp-composition.yxp-composition-skin-1 .meta-cards .card-item .text {
  display: block;
  font-size: 16px;
  margin-bottom: 5px;
  font-weight: bold;
  color: #6fa679;
}

.yxp-composition.yxp-composition-skin-1 .meta-cards .card-item .value {
  text-align: center;
  display: block;
  font-size: 21px;
  background: url("@/assets/yufa_v2/gxyf_xbg.png") center / 100% 100% no-repeat;
  height: 50px;
  line-height: 50px;
  color: #3a8046;
}

.yxp-composition.yxp-composition-skin-1 .meta-cards .card-item .value.shichang {
  background: url('@/assets/xiezuo_v2/qsxz_naozhong.png') center / 100% 100% no-repeat;
  height: 169px;
  width: 115px;
  margin: 0 auto;
  margin-bottom: 10px;
  line-height: 60px;
  padding-top: 50px;
}

.yxp-composition.yxp-composition-skin-1 .meta-cards .card-item .value.shichang div {
  font-size: 16px;
  line-height: 30px;
  color: #3a8046;
}

.yxp-composition.yxp-composition-skin-1 .meta-cards .card-item .value.shichang div.num {
  font-weight: bold;
  font-size: 25px;
}

.yxp-composition.yxp-composition-skin-1 .meta-cards .card-item .value.xiezuo {
  text-align: center;
  background: url('@/assets/xiezuo_v2/qsxz_zbg.png') center / 100% 100% no-repeat;
  height: 79px;
  width: 168px;
}

.yxp-composition.yxp-composition-skin-1 .meta-cards .card-item .value.xiezuo div {
  display: flex;
  color: #3a8046;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  line-height: 1;
  height: 100%;
  padding: 5px;
}

.yxp-composition.yxp-composition-skin-1 .xiezuo-select-course {
  margin-top: 10px;
  display: inline-block;
  color: #076316;
  border-radius: 10px;
  border: 1px solid #076316;
  padding: 3px 12px;
  cursor: pointer;
  font-size: 18px;
}

.yxp-composition.yxp-composition-skin-1 .xiezuo-select-course .xiezuo-select-course-default-text {
  color: #076316;
  font-size: 15px;
}

.yxp-composition.yxp-composition-skin-1 .xiezuo-select-course img {
  width: 15px;
  height: 15px;
}

.select-course {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
}

</style>